{extend name='template/base'}{/extend}
{block name='style'}
<style>
    body{
        overflow-x: hidden;
    }
    #appendedInput:focus{
         border-color:#d2d6de!important;
    }
</style>
<link rel="stylesheet" href="__STATIC__/plugins/bootstrap-treeview/bootstrap-treeview.min.css">
<link rel="stylesheet" type="text/css" href="__STATIC__/plugins/fontIconPicker/css/jquery.fonticonpicker.min.css" />
<link rel="stylesheet" href="__STATIC__/plugins/font-awesome4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="__STATIC__/plugins/fontIconPicker/themes/bootstrap-theme/jquery.fonticonpicker.bootstrap.min.css" />
{/block}
{block name='script'}
<script src="__STATIC__/plugins/bootstrap-treeview/bootstrap-treeview.min.js"></script>
<script type="text/javascript" src="__STATIC__/plugins/fontIconPicker/jquery.fonticonpicker.min.js"></script>
{/block}
{block name='content'}
    <form class="form-horizontal" id="form" action="{:url('AdminMenu/insert')}">
        <div class="box-body">
            <div class="form-group">
                <label class="col-sm-3 control-label"><i data-icomoon="&#xe05c"></i>上级菜单</label>
                <div class="col-sm-6" style="position: relative">
                    <div class="input-group"  onclick="show_tree()">
                        <input  id="appendedInput" style="cursor: pointer" readonly="true" value="{$item.name ?? '请选择上级菜单'}" class="form-control tree-input span2" type="text" name="parent"  datatype="*" nullmsg="请填写上级菜单">
                        <span class="input-group-addon" style="background: #eeeeee;border-radius: 0 4px 4px 0;cursor: pointer"><i class="fa fa-chevron-down"></i></span>
                    </div>
                    <input type="hidden" id="parent_id" name="parent_id" value="{$item.id ?? '0'}">
                    <div class="treeview" style="display: none;position: absolute;z-index: 999;"></div>
                </div>
                <div class="col-sm-3"></div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">菜单名称</label>
                <div class="col-sm-6">

                    <input class="form-control" type="text" name="name"  datatype="*" nullmsg="请填写昵称">
                </div>
                <div class="col-sm-3"></div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">图标</label>
                <div class="col-sm-6">
                    <input type="text" id="bootstrap-theme" name="icon"/>

                </div>
                <div class="col-sm-3"></div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">排序</label>
                <div class="col-sm-6">
                    <input class="form-control" type="number" name="sort" style="width: 100px;" value="0">
                </div>
                <div class="col-sm-3"></div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">外链地址</label>
                <div class="col-sm-6">
                    <input class="form-control" type="text" name="url">
                </div>
                <div class="col-sm-3"></div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">是否显示</label>
                <div class="col-sm-6">
                    <span class="mr20" style="padding-right: 20px"><input type="radio" class="minimal" name="flag_use" value="1" checked> 显示</span>
                    <span class="mr20"><input type="radio" class="minimal" name="flag_use" value="0"> 不显示</span>
                </div>
                <div class="col-sm-3"></div>
            </div>
            <div class="form-group">
                <div class="col-sm-9 col-sm-offset-3">
                    <button type="submit" class="btn btn-primary">&nbsp;&nbsp;提交&nbsp;&nbsp;</button>
                    <button type="button" class="btn btn-default radius ml-20" onclick="layer_close();">&nbsp;&nbsp;取消&nbsp;&nbsp;</button>
                </div>
            </div>
        </div>
    </form>
{/block}
{block name='script_extra'}
<script>
    var tree_data_url="{:url('AdminMenu/parent_tree_data')}"
</script>
<script>
    var icm_icons = {$icon};
    //                        console.log(icm_icons);
    $('#bootstrap-theme').fontIconPicker({
        source: icm_icons,
        theme:'fip-bootstrap',
        emptyIcon: true,
        hasSearch: true
    });
</script>
<script>
    $("#form").Validform({
        tiptype:2,
        showAllError:true,
        ajaxPost: true,
        callback: function (res) {
            if (res.success == true){
                layer.msg(res.message, {time: 1000},function () {
                    layer_close();
                    parent.window.location.reload();
                });
            }else{
                layer.alert(res.message);
            }
        }
    });

    function show_tree() {
        var treeview=$('.treeview');
        get_tree();
        if(treeview.is(":hidden")){
            treeview.show();
        }else{
            treeview.hide();
        }
    }
    function get_tree() {
        var treeview=$('.treeview');
        $.post(tree_data_url, function (json) {
            console.log(json);
            treeview.treeview({
                color:'#428bca',
                onNodeSelected: function(event, node) {
                    $('.tree-input').val(node.text);
                    $('#parent_id').val(node.id);
                    treeview.hide();
                },
                levels:1,
                data: json});
        });
    }

</script>
{/block}